<template>
  <div>
    <div class="trend">
      <div class="text" :style="{ color: textColor }">
        <slot v-if="slots.default"></slot>
        <div v-else>{{ text }}</div>
      </div>
      <div class="icon">
        <component
          :is="`el-icon-${toLine(upIcon)}`"
          v-if="type === 'up'"
          :style="{ color: !reverseColor ? upIconColor : '#52c41a' }"
        ></component>
        <component
          :is="`el-icon-${toLine(downIcon)}`"
          v-else
          :style="{ color: !reverseColor ? downIconColor : '#f5222d' }"
        ></component>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toLine } from "@/utils";
import { computed, useSlots } from "vue";
const slots = useSlots();
let props = defineProps({
  type: {
    type: String,
    default: "up",
  },
  // 传递的数据
  // 1、 父组件
  // 2、 插槽
  text: {
    type: String,
    default: "",
  },
  upIconColor: {
    type: String,
    default: "#f5222d",
  },
  downIconColor: {
    type: String,
    default: "#52c41a",
  },
  reverseColor: {
    type: Boolean,
    default: false,
  },
  upTextColor: {
    type: String,
    default: "#f5222d",
  },
  downTextColor: {
    type: String,
    default: "#52c41a",
  },
  upIcon: {
    type: String,
    default: "ArrowUp",
  },
  downIcon: {
    type: String,
    default: "ArrowDown",
  },
});
let textColor = computed(() => {
  return props.type === "up" ? props.upTextColor : props.downTextColor;
});
</script>

<style scoped lang="scss">
.trend {
  display: flex;
  align-items: center;
  .text {
    font-size: 12px;
    margin-right: 4px;
  }
  .icon {
    svg {
      width: 0.8em;
      height: 0.8em;
    }
  }
}
</style>
